<template>
  <div>
    <Portlet>
      <template slot="caption">
        教室列表
      </template>

      <template slot="action">
        <el-button type="primary" size="small" @click="addBuildingVisible">
          <i class="ssfont tianjia" style="font-size: 12px; font-weight: 700"></i>增加
        </el-button>
      </template>


      <template slot="search">
        <div class="ss__portlet__search">
          <el-select v-model="search.status" placeholder="请选择状态" size="small" style="width: 150px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="search.name" placeholder="请输入楼栋名" size="small" style="width: 180px"></el-input>
          <el-button type="primary" size="small" @click="getList">查找</el-button>
        </div>
      </template>

      <template slot="body">
        <el-table
          :data="tableData"
          border
          size="mini"
          style="width: 100%"
          class="ss__table"
          @sort-change="sortableChange">
          <el-table-column
            prop="name"
            label="名称"
          >
          </el-table-column>
          <el-table-column
            prop="status.desc"
            label="状态"
            width="80">
          </el-table-column>
          <el-table-column
            prop="sort"
            label="排名"
            width="100">
          </el-table-column>

          <el-table-column
            prop="edit"
            label="操作"
            width="120">
            <template slot-scope="scope">

              <div class="table__set">
                <a @click="getDetail(scope.row.buildingId)">编辑</a>
                <a @click="getDetail(scope.row.buildingId)">设置</a>
              </div>
            </template>
          </el-table-column>

        </el-table>
        <Pagination :count="page.count" :size="page.size" @onPaginationChange="onPaginationChange"/>
      </template>
      <el-dialog
        title="编辑"
        :visible.sync="visible"
        width="600px"
      >
        <el-form ref="form" :model="form" label-width="140px" size="small">
          <el-form-item label="楼栋名称">
            <el-input v-model="form.name" autocomplete="off" style="width: 284px" placeholder="请输入房间名"></el-input>
          </el-form-item>
          <el-form-item label="排名">
            <el-input type="age" v-model.number="form.sort" autocomplete="off" style="width: 156px" placeholder="请填写排名">
            </el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="form.status.name">
              <el-radio label="hidden">隐藏</el-radio>
              <el-radio label="display">显示</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="visible = false" size="mini">取 消</el-button>
         <el-button type="primary" @click="update" size="mini">确 定</el-button>
      </span>
      </el-dialog>
    </Portlet>

    <PortletTabCard :visible.sync="tabVisible" member="student">
      <template slot="header">
        <el-tabs v-model="activeNameCondition" :stretch="true">
          <el-tab-pane label="答题统计" name="statistics">

          </el-tab-pane>
          <el-tab-pane label="答题明细" name="detail">

          </el-tab-pane>
        </el-tabs>
      </template>
      <template slot="body">
        <!--     签到倒计时-->
        <div v-if="activeNameCondition=='statistics'">
          <el-button style="width: 120px;background:#105cfb;color: #fff;border: none;margin-top: 25px" size="small">statistics签到</el-button>
        </div>
        <div v-if="activeNameCondition=='detail'">
          <el-button style="width: 120px;background:#105cfb;color: #fff;border: none;margin-top: 25px" size="small">detail签到</el-button>
        </div>
      </template>
    </PortletTabCard>
  </div>
</template>

<script>
import utils from "~/util/utils"

export default {
  name: "list",
  data() {
    return {
      tabVisible: true,
      activeNameCondition: 'statistics',
      name: '',
      status: '',
      search: {
        type: '',
        name: '',
        status: ''
      },
      page: {
        list: [],
        count: 0,
        size: 10,
        number: 1,
        order: "",
        by: "",
      },
      form: {
        name: '',
        sort: 0,
        status: {
          desc: "隐藏",
          name: "hidden"
        },
      },
      options: [
        {
          value: '',
          label: '请选择状态'
        },
        {
          value: 'display',
          label: '显示'
        }, {
          value: 'hidden',
          label: '隐藏'
        }],
      visible: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted() {
  },
  methods: {
    getList() {
      this.$http.get('/admin/estate/setting/building/page.json', {
        p: this.page.number,
        status: this.search.status,
        name: this.search.name,
        order: this.page.order,
        by: this.page.by,
      }).then((res) => {
        this.page.list = res.list
        this.page.count = res.pageCount
        this.page.size = res.rows
      })
    },
    getDetail(buildingId) {
      this.$http.get('/admin/estate/setting/building/detail.json', {buildingId: buildingId}).then((res) => {
        this.visible = true
        this.form = res
      })
    },
    update() {
      this.$http.post('/admin/estate/setting/building/update.json', {
        buildingId: this.form.buildingId,
        name: this.form.name,
        sort: this.form.sort,
        status: this.form.status.name,
      }).then((res) => {
        this.visible = false

        this.getList()
        this.$message.success('编辑成功！')
      })

    },

    addBuildingVisible() {
      this.$prompt('请输入楼栋名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        this.$http.post('/admin/estate/setting/building/add.json', {
          name: value,
        }).then((res) => {
          this.$message.success('增加成功！')
          this.getList()
        })
      }).catch(() => {

      });
    },

    sortableChange(data) {
      utils.utilSortableChange(this, data).then(() => {
        this.getList()
      })
    },

    onPaginationChange(pageNum) {
      this.page.number = pageNum
      this.getList()
    },
  }
}
</script>

<style scoped lang="less">

</style>
